<template>
    <div class="com-cnt">
        <!-- 已登陆但不是会员去办理体验会员 -->
        <i-swiper :items="items" v-show="userToken&&vipType == 0">
            <template slot-scope="data">
                <router-link :to="{path:'rechargeFace'}" tag="span" class="swiper-img" :style="{backgroundImage:'url('+data.src.photo+')'}">
                </router-link>
            </template>
        </i-swiper>
        <!-- 已登陆不是会员去充值 -->
        <i-swiper :items="items" v-show="userToken&&vipType == 999">
            <template slot-scope="data">
                <!-- 以实名 -->
                <router-link :to="{path:'newrecharge'}" tag="span" class="swiper-img" v-if="uthenticationStatus==3" :style="{backgroundImage:'url('+data.src.photo+')'}">
                </router-link>
                <!-- 未实名 -->
                <router-link :to="{path:'shiming'}" tag="span" class="swiper-img" v-if="uthenticationStatus==2" :style="{backgroundImage:'url('+data.src.photo+')'}">
                </router-link>
            </template>
        </i-swiper>
        <!-- 未登录去登陆 -->
        <i-swiper :items="items" v-show="!userToken">
            <template slot-scope="data">
                <router-link :to="{path:'login'}" tag="span" class="swiper-img" :style="{backgroundImage:'url('+data.src.photo+')'}">
                </router-link>
            </template>
        </i-swiper>
        <!-- 已登录已办会员 -->
        <i-swiper :items="items" v-show="userToken&&vipType>=1&&vipType<=6">
            <template slot-scope="data">
                <router-link :to="{path:'recharge'}" tag="span" class="swiper-img" :style="{backgroundImage:'url('+data.src.photo+')'}">
                </router-link>
            </template>
        </i-swiper>
        <icon-com :items="icons"></icon-com>
        <!-- 广告展示 -->
        <!-- <router-link :to="{path:'/exclusive'}" tag="span" class="advertise">
            <img src="@/assets/imgs/advertise.png" alt="广告">
        </router-link> -->
        <span @click="toexclusive" class="advertise">
            <img src="@/assets/imgs/advertise.gif" alt="广告">
        </span>
            <!-- <div class="mask" :class="{hidemask:hidemaskFlag}">
            <div :class="vipType==999?'hyfl':'hyfl2'">
                <div :class="vipType==999?'closebtn':'closebtn2'" @click="closeMaskClick"></div>
                <div :class="vipType==999?'yesbtn':'yesbtn2'" @click="toSubmitMember">立即申请</div>
            </div>
        </div> -->
            <!-- 三板块入口 -->
            <div class="threeenter">
                <!-- 热门推荐 -->
                <router-link :to="{'path':'jhs','query':{'ishyfl':666}}" tag="div" class="adhotrecommend">
                    <div class="adhotrecommendtit">热门推荐</div>
                </router-link>
                <!-- 有机农鲜 -->
                <router-link :to="{path:'njx'}" tag="div" class="adfresh">
                    <div class="adfreshtit">人气疯抢</div>
                </router-link>
                <!-- 度假旅游 -->
                <router-link :to="{path:'superValue'}" tag="div" class="adtravel"></router-link>
            </div>
            <!-- 每周专享 -->
            <div class="week">
                <div class="weekline"></div>
                <p class="weektxt">每周专享</p>
                <div class="weekline"></div>
            </div>
            <div class="weeklist">
                <v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" :bottomDistance='30' ref="loadmore">
                    <ul v-if="list.length != 0" class="weekul">
                        <li @click="direct(item.id)" v-for="item in list">
                            <div class="weekListImg">
                                <img :src='item.thumbnail' alt="">
                        </div>
                                <div class="weekListInfo">
                                    <div class="weekListTit">{{item.name}}</div>
                                    <div class="memberPrice1">会员价</div>
                                    <div class="memberPrice2">
                                        <div class="memberPriceLeft">￥ {{(item.price||'0')}}</div>
                                        <span class="marketPrice">
                                            市场价{{(item.marketPrice)}}
                                        </span>
                                    </div>
                                </div>
                        </li>
                    </ul>
                </v-loadmore>
            </div>

            <!-- 弹出层 -->
            <div class="mask" :class="{hidemask:hidemaskFlag}">
                <div :class="vipType==0?'hyfl2':'hyfl'">
                    <div :class="vipType==0?'closebtn2':'closebtn'" @click="closeMaskClick"></div>
                    <div :class="vipType==0?'yesbtn2':'yesbtn'" @click="toSubmitMember">立即申请</div>
                </div>
            </div>
    </div>
</template>

<script>
import http from "@/assets/js/axios"
import ISwiper from '@/common/swiper/swiper.vue'
import IconCom from '@/common/icon/Icon.vue'
import CntCom from '@/common/cnt/Cnt.vue'
import UpdownCom from '@/common/cnt/Updown.vue'
import TitleiconCom from '@/common/title/Icon.vue'
import ItemcntCom from '@/common/list/Itemcnt.vue'
import UpdownitemCom from '@/common/list/UpdownItem.vue'
import axios from 'axios'
import Qs from 'qs'
import { maskTips, maskCallback } from '@/assets/js/dom'
import $ from 'jquery'
import { domain,domain2 } from '@/assets/js/config'
import { Loadmore } from 'mint-ui'
export default {
    name: 'indexPage',
    components: {
        ISwiper,
        IconCom,
        CntCom,
        UpdownCom,
        TitleiconCom,
        ItemcntCom,
        UpdownitemCom,
        'v-loadmore': Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
        // 推荐应用组件时用a-b形式起名
    },
    data() {
        return {
            items: [],
            isVIP: '',
            list: [],
            pgnum: 1,
            pages: 10,
            allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
            vipType: '',
            hidemaskFlag: true,
            uthenticationStatus: '',
            userToken: '',
            icons: [
                {
                    img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/rechargeFace'
                }, {
                    img: require('@/assets/imgs/icons/njx.png'), txt: '有机食品', url: '/njx'
                }, {
                    img: require('@/assets/imgs/icons/pasture.png'), txt: '超值商城', url: '/jhs'
                }, {
                    img: require('@/assets/imgs/icons/travel.png'), txt: '休闲旅游', url: '/superValue'
                }, {
                    img: require('@/assets/imgs/icons/jkylicon.png'), txt: '健康养生', url: '/acti'

                }, {
                    img: require('@/assets/imgs/icons/tv.png'), txt: '平台风采', url: '/tjlb'
                }, {
                    img: require('@/assets/imgs/icons/yqhy.png'), txt: '邀请好友', url: '/yqhy'
                }, {
                    img: require('@/assets/imgs/icons/rqw.png'), txt: '融桥网', url: '/'
                }, {
                    img: require('@/assets/imgs/icons/slw.png'), txt: '搜漏网', url: '/'
                }, {
                    img: require('@/assets/imgs/icons/agent.png'), txt: '代理申请', url: '/'
                }
            ],
            itemsData: [],
            goodslist: []
        }
    },
    mounted() {
        //充值需要登录
        var self = this
        var userToken = localStorage.getItem('token')
        self.userToken = userToken

        maskCallback(function () {
            self.$router.push('/rechargeFace')
        }, 'comp-mask-btnAleft-tobuycard', 'comp-mask-btnAright')
        //三个icon弹出敬请期待
        $('.icons li:eq(7),.icons li:eq(8)').bind('click', function () {
            maskTips({ id: 'alert-wait', txt: '敬请期待' })
        })
        $('.icons li:eq(9)').bind('click', function () {
            if (!self.userToken) {
                maskTips({ id: 'alereet-wait', txt: '当前未登录，请前去登录页面登录' })
                // var toUrl = "http://rongqiaowang.com/#/index/home?token=" + self.userToken;
                // window.open(toUrl);
                // return false;
            } else {
                self.$router.push('/agCation')
                //  var toUrl = "http://rongqiaowang.com/#/index/home?token=" + self.userToken;
                // window.open(toUrl);
            }
        })

        if (!userToken) {
            self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/login' })
        } else {
            axios({
                url: domain + "/xshk/f/home/info?token=" + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                //data: Qs.stringify({})
            }).then(res => { self.checkUser(res) }).catch(err => { self.checkUserFail(err) })
        }

        if (self.$route.query.userid && parseInt(self.$route.query.type) == 0) {
            localStorage.setItem('userid', self.$route.query.userid)
        }
        if (self.$route.query.userid && parseInt(self.$route.query.type) == 1) {
            localStorage.removeItem('userid')
        }
        self.doAjaxBanner()
        self.doAjaxList()
        self.getjhslist()
        self.getPages()
    },
    methods: {
        doAjaxBanner() {
            let self = this
            axios({
                url: domain + '/xshk/f/index/banner',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).then(res => { self.handleGetBannerSucc(res) }).catch(err => { self.handleGetDataFail(err) })
        },
        handleGetBannerSucc(res) {
            res = res.data
            if (res && res.code == 0) {
                this.items = res.data
            }
        },
        doAjaxList() {
            let self = this
            axios({
                url: domain + '/xshk/f/tour_list',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({ 'pageNumber': self.pageNumber, 'pageSize': 10 })
            }).then(res => { self.handleGetDataSucc(res) }).catch(err => { self.handleGetDataFail(err) })
        },
        handleGetDataSucc(res) {
            res = res.data
            if (res && res.code == 0) {
                this.itemsData = res.data.list
            }
        },
        handleGetDataFail(err) {
            console.log(err)
            maskTips({ id: "axios-tips-fail", txt: '网络通信失败!' })
        },
        getjhslist() {
            let self = this
            axios({
                url: domain + '/xshk/f/frontCommodity/list',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({ recommendFlag: 1, pageNum: 1, pageSize: 4 })
            }).then(res => { self.showjhslist(res) }).catch(err => { self.showjhslistFail(err) })
        },
        showjhslist(res) {
            let that = this
            that.goodslist = res.data.data.list
        },
        showjhslistFail(err) {
            console.log(err)
        },
        // tojhsdetails(sid) {
        //     this.$router.push({
        //         path: '/jhsdetails',
        //         query: {
        //             id: sid
        //         }
        //     })
        // },
        checkUser(res) {
            var self = this
            self.isVIP = res.data.data.isVIP
            self.vipType = res.data.data.vipType
            self.uthenticationStatus = res.data.data.uthenticationStatus
            // console.log(res.data)
            // //已登录并且是非会员
            // if(res.data.code == 0&&self.vipType==0){
            //     if(self.uthenticationStatus == 2){
            //         self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/shiming' })
            //     }else if(self.uthenticationStatus == 3){
            //         self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/newrecharge' })
            //     }

            //     //第一次进首页已登录的非会员弹出办理会员遮罩层
            //     let alertAd = sessionStorage.getItem('alertAd')
            //     if(!alertAd){
            //         self.hidemaskFlag = false
            //         sessionStorage.setItem('alertAd',1)
            //     }
            // }else if(res.data.code == 0&&self.vipType>=1){
            //     //已登录并且是vip会员一级以上
            //     self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/recharge' })
            // }
            //已登录并且是体验会员
            // if (res.data.code == 0 && self.vipType == 999) {
            //     self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/newrecharge' })
            //     console.log('已登录并且是体验会员viptype=999')
                //是体验会员
                //第一次进首页已登录的非会员弹出办理会员遮罩层
                // let alertAd = sessionStorage.getItem('alertAd')
                // if (!alertAd) {
                //     self.hidemaskFlag = false
                //     sessionStorage.setItem('alertAd', 1)
                // }
                //已登录并且不是会员
            // } else if (res.data.code == 0 && self.vipType == 0) {
            //     console.log('已登录并且不是会员viptype=0')
            //     self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/rechargeFace' })
                // if(self.uthenticationStatus == 2){
                //     self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/shiming' })
                // }else if(self.uthenticationStatus == 3){
                //     self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/rechargeFace' })
                // }
                // self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/newrecharge' })
            //     let alertAd = sessionStorage.getItem('alertAd')
            //     if (!alertAd) {
            //         self.hidemaskFlag = false
            //         sessionStorage.setItem('alertAd', 1)
            //     }
            // } else if (res.data.code == 0 && self.vipType >= 1 && self.vipType <= 6) {
            //     //已登录并且是vip会员一级以上
            //     self.$set(self.icons, 0, { img: require('@/assets/imgs/icons/recharge.png'), txt: '在线充值', url: '/recharge' })
            // }
        },
        checkUserFail(err) {
            console.log(err)
        },
        closeMaskClick: function () {
            this.hidemaskFlag = true
        },
        toSubmitMember: function () {
            var self = this
            // if(self.vipType == 999){
            //     self.$router.push('/newrecharge')
            // }else if(self.vipType == 0){
            //     self.$router.push('/rechargeFace')
            // }
            if (self.vipType == 999 && self.uthenticationStatus == 3) {
                self.$router.push('/newrecharge')
            } else if (self.vipType == 0) {
                self.$router.push('/rechargeFace')
            } else {
                self.$router.push('/shiming')
            }
        },
        //去会员福利
        toexclusive: function () {
            if (this.userToken) {
                // if(this.vipType == 0){
                //     maskTips({id:'not-vipuser' + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-tobuycard', btnTxt: '确认', btnTxt2: '取消', txt: '您还不是会员，是否去办理会员'})
                // }else{
                //     this.$router.push({
                //         path:'/exclusive'
                //     })
                // }
                this.$router.push({
                    path: '/njx',
                    query: {
                        'ishyfl': 666
                    }
                })
            } else {
                this.$router.push({
                    path: '/login'
                })
            }

        },
        // 默认显示第一页
        getPages: async function () {
            let userToken = localStorage.getItem("token") || '';
            let that = this
            let postDo = {
                'productTagId': 9953,
                'pageNumber': that.pgnum,
                "pageSize": 3
            };
            const res = await http.post(domain2 + '/shop/api/product/pageList' , postDo)
            if (res.status == 200) {
                if (res.data.data) {
                    that.list = that.list.concat(res.data.data.page.content);
                    // that.pgnum = res.data.data.pageNumber;
                    // that.pages = res.data.data.pages;
                    
                } else {
                    that.list.list = []
                }
            }
        },
        // 加载下一页
        loadBottom: function () {
            // 上拉加载
            var that = this
            that.pgnum++
            console.log(that.pgnum)
            setTimeout(function () {
                that.getPages();// 上拉触发的分页查询
                that.$refs.loadmore.onBottomLoaded()// 固定方法，查询完要调用一次，用于重新定位
            }, 500)
        },
        direct: function (val) {
            this.$router.push({                path: "/njxdetails",
                query: {
                    id: val
                }
            });
        },
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl';

.com-cnt {
    width: 100%;
    height: auto;
    overflow: hidden;

    .swiper-img {
        width: 100%;
        display: block;
        overflow: hidden;
        padding-bottom: 46.66666666666667%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }
}

.img-up-com {
    width: 100%;
    height: auto;
    overflow: hidden;

    .pic {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative;
        display: block;

        img {
            display: block;
            width: 100%;
            height: 135px;
            border-radius: 5px;
        }

        .picinfo {
            display: block;
            position: absolute;
            top: 0.2rem;
            left: 5px;
            font-size: 12px;
            background: #E4E4E4;
            padding: 3px;
        }
    }
}

.info-down-com {
    width: 100%;
    height: auto;
    overflow: hidden;

    .title {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #F2F2F2;
        margin-left: 0.1rem;
        ellipsis();
    }

    .num {
        width: 100%;
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        color: red;
        ellipsis();
    }
}

.com-cnt >>> .down {
    font-size: 12px;
    top: -25px;
}

.com-cnt >>> .info {
    padding: 0 0 0 15px !important;
    float: left;
}

.com-cnt >>> .icon {
    width: 20% !important;
    min-width: 20% !important;
    max-width: 20% !important;
    display: block;
}

.jhstitle {
    height: 0.9rem;
    width: 100%;
    line-height: 0.9rem;
    overflow: hidden;
    border-top: 0.2rem solid #efefef;
    text-indent: 0.14rem;

    span {
        dwidth: 100%;
    }

    height: 100%;
    font-size: 0.36rem;
    color: #333;
    font-weight: bold;
}

.jhsfourcon {
    width: 100%;

    // margin-top: 10px;
    .jhsfourli {
        width: 47%;
        float: left;
        margin-left: 2%;
        margin-bottom: 15px;

        i {
            font-size: 12px;
            display: block;
            color: red;
        }

        .jhsfourliimg {
            width: 100%;
            height: 150px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }

        span {
            word-break: keep-all; /* 不换行 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis;
            font-size: 14px;
            display: block;
            height: 20px;
            width: 100%;
            text-align: center;
            color: #303030;
        }
    }
}

.advertise {
    width: 350px;
    height: 130px;
    margin: 10px;
    display: block;

    img {
        width: 100%;
        height: 100%;
    }
}

.mask {
    position: fixed;
    box-sizing: border-box;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    color: rgb(232, 232, 232);
    font-family: Menlo, Consolas, monospace;
    font-size: large;
    line-height: 1.2;
    white-space: pre-wrap;
    overflow: auto;
    z-index: 99;

    .hyfl {
        width: 272px;
        height: 364px;
        position: absolute;
        left: 55px;
        top: 100px;
        background: url('../../assets/imgs/indeximg/notvipshow.png') no-repeat;
        background-size: 100% 100%;
    }

    .hyfl2 {
        width: 272px;
        height: 364px;
        position: absolute;
        left: 55px;
        top: 100px;
        background: url('../../assets/imgs/indeximg/notvipshow2.png') no-repeat;
        background-size: 100% 100%;
    }

    .yesbtn {
        width: 193px;
        height: 47px;
        position: absolute;
        left: 40px;
        bottom: -71px;
        background: url('../../assets/imgs/indeximg/yesbtn.png') no-repeat;
        background-size: 100% 100%;
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        line-height: 47px;
        font-family: PingFangSC-Regular;
    }

    .yesbtn2 {
        width: 193px;
        height: 47px;
        position: absolute;
        left: 40px;
        bottom: -71px;
        background: url('../../assets/imgs/indeximg/yesbtn2.png') no-repeat;
        background-size: 100% 100%;
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        line-height: 47px;
        font-family: PingFangSC-Regular;
    }

    .closebtn {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 15px;
        top: 15px;
        background: url('../../assets/imgs/indeximg/closebtn.png');
        background-size: 100% 100%;
    }

    .closebtn2 {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 15px;
        top: 15px;
        background: url('../../assets/imgs/indeximg/closebtn2.png');
        background-size: 100% 100%;
    }
}

.hidemask {
    display: none;
}

.threeenter {
    width: 100%;
    height: 213px;
    border-top: 8px solid #EEEEEE;

    div {
        float: left;
        background-size: 100% 100% !important;
    }

    .adhotrecommend {
        position: relative;
        width: 163px;
        height: 205px;
        background: url('../../assets/imgs/indeximg/adhotrecommend.png');
        border-right: 1px solid #eeeeee;

        .adhotrecommendtit {
            font-size: 20px;
            color: #fff;
            width: 120px;
            border-radius: 0px 17px 17px 0px;
            padding-left 15px;
            height: 34px;
            line-height: 34px;
            background #99c400
            // background: url('../../assets/imgs/indeximg/adhotrecommendtit.png');
            position: absolute;
            top: 20px;
        }
    }

    .adfresh {
        position: relative;
        width: 212px;
        height: 104px;
        background: url('../../assets/imgs/indeximg/adfresh.png');
        border-bottom: 1px solid #eeeeee;

        .adfreshtit {
            width: 78px;
            height: 24px;
            line-height: 24px;
            position: absolute;
            top: 69px;
            left: 10px;
            border: 1px solid #99c400;
            border-radius: 5px;
            font-size: 12px;
            color: #99c400;
            text-align: center;
        }
    }

    .adtravel {
        position: relative;
        width: 212px;
        height: 101px;
        background: url('../../assets/imgs/indeximg/adtravel.png');
    }
}

.week {
    height: 56px;
    padding-left: 80px;
    border-top: 8px solid #EEEEEE;

    div {
        float: left;
    }

    .weektxt {
        width: 90px;
        font-size: 18px;
        color: #99C400;
        float: left;
        margin-top: 15px;
        text-align: center;
    }

    .weekline {
        width: 64px;
        height: 1px;
        margin-top: 27px;
        background: #C2DF5A;
    }
}

.weekul {
    width: 355px;
    padding: 0 0 10px 10px;

    li {
        height: 125px;
        margin-top: 17px;
        border-radius: 5px;
        box-shadow: 0 0 10px #ccc;

        .weekListImg {
            width: 114px;
            height: 125px;
            float: left;

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }

        .weekListInfo {
            width: 230px;
            height: 125px;
            padding: 10px 0 0 11px;
            position: relative;
            float: left;

            .weekListTit {
                font-size: 18px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .memberPrice1 {
                font-size: 12px;
                color: #fff;
                height: 16px;
                width: 43px;
                line-height: 16px;
                background: #C2DF5A;
                position: absolute;
                top: 72px;
                text-align: center;
            }

            .memberPrice2 {
                position: absolute;
                top: 97px;

                .memberPriceLeft {
                    float: left;
                    font-size: 16px;
                    color: #FF0000;
                }

                .marketPrice {
                    float: left;
                    display: block;
                    color: #999999;
                    font-size: 12px;
                    margin-left: 12px;
                    margin-top: 5px;
                    text-decoration: line-through;
                }
            }
        }
    }
}

.com-cnt >>> .mint-loadmore-bottom {
    font-size: 12px;
}
</style>